<template>
  <div class="question_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="dataInfo.title" v-if="isDayTime === false" title_color="#fff" :class="themeClass"></v-nav>
    <v-nav :title="dataInfo.title" v-if="isDayTime === true"></v-nav>
    <div class="question_mod_box">
      <p v-html="dataInfo.content" :class="bgColor"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionAnswering',
  data() {
    return {
      id: 0,
      dataInfo: {},
      isDayTime: false,
      loading: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  activated() {
    this.id = this.$route.query.id
    this.getHelpDetail()
  },
  methods: {
    async getHelpDetail() {
      this.loading = true
      await this.$https.get('/platform/getHelpDetail?id=' + this.id).then(res => {
        this.dataInfo = res.data
      })
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
.question_mod {
  min-height: 100vh;
  background-color: #f3f3f3;
  &_box {
    padding: 12px;
    p {
      white-space: pre-wrap;
      font-size: 14px;
      font-family: Roboto-Regular, Roboto;
      font-weight: 400;
      color: #1a1a1a;
      white-space: normal; /* 默认情况下，文本不会自动换行 */
      word-wrap: break-word; /* 当单词太长无法完全放入元素宽度时，自动换行 */
      overflow-wrap: break-word; /* 与 word-wrap 类似，但更符合现代标准 */
    }
  }
}
.daytime {
  background: #fff;
  color: black;
}
.active1 {
  background: #121212;
  color: #fff;
}
.darknight {
  background: #191b27 !important;
  color: #fff;
}
.dark_li_color {
  background: #121212;
  color: #fff !important;
}
.white {
  color: #fff !important;
}
</style>
